<template>
	<view class="content">
		<view class="banner">
			<u-swiper  :list="list"  height="260" indicatorActiveColor="#333" indicatorInactiveColor="rgba(165, 165, 165, .4)" radius="0" circular></u-swiper>
	 
		</view>
		
		<view class="page-top">
			<view class="sbox1">
				<view class="t1">
					{{product.name}} ￥{{product.price}}
				</view> 
				<view class="t3">
					{{product.subTitle}}
				</view>
			</view>
		</view>
		
		
		<view class="goodsDetail">
			
			<view class="goodsNum">
				<view class="title">
					数量
				</view>
				<u-number-box v-model="count" buttonSize="24"></u-number-box>
			</view>
			<u-parse :content="product.detailMobileHtml" :tagStyle="style"></u-parse>
		</view>
		<view class="zw" :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			
		</view>
		<view class="goodsBottomBtn"  :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			 <view class="right">
				<view class="btn2"  @click="handleToSubmit">
					立即支付
				</view>
			</view>
		</view> 
	 
		   
		
	</view>
</template>

<script> 
	export default{ 
		data(){
			return{
				skuId:'',
				chooseType:'',
				id:'',
				commentTotal:'',
				commentList:[],
				count:1,
				show:false,
				shareShow:false,
				list:[],
				product:'',
				skuStockList:[],
				specChildList:[],
				specSelected:[],
				specList:[],
				content:'123',
				style: { 
					p: 'color: #545454;font-size:32rpx;line-height:44rpx;margin-bottom:20rpx',
					span: 'font-size: 30rpx',
					img:'width:100% !important;height:auto !important;display:block'
				},
				bottomPadding:0,
				codeImg:'',
				showHomeButton:false
			}
		},
		computed:{
			systemInfo(){ 
				return uni.getStorageSync('systemInfo')	
			}
		},
		onLoad(e) {  
			this.id = 77
			this.getDetail() 
			
			const pages = getCurrentPages() 
			if (pages.length === 1) { 
			   this.showHomeButton = true
			} 
			
			this.bottomPadding = uni.getStorageSync('bottomPadding') 
		},
		// 分享给好友的设置
		onShareAppMessage(res) {
			return {
				title: this.product.name,
				path: `/pages/category/detail?id=${this.id}`,
				imageUrl: this.product.pic,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
			// // 分享到朋友圈的设置
			// onShareTimeline() {
			// 	return {
			// 		title:  this.product.name,
			// 		query: 'from=timeline',
			// 		imageUrl: this.product.pic,
			// 		success(res) {
			// 			uni.showToast({
			// 				title: '分享成功'
			// 			})
			// 		},
			// 		fail(res) {
			// 			uni.showToast({
			// 				title: '分享失败',
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}
			// },
		methods:{ 
			handleBackHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},     
			handleToSubmit(){
				this.$http({
					url:"/order/generateConfirmOrder",
					data:{
						count:this.count,
						skuId:this.skuId
					}
				}).then(data=>{
					
					this.toPay()
				})
			},
			
			toPay(){
				this.$http({
					url:"/order/generateOrder",
					data:{
						skuId:this.skuId,
						count:this.count
					}
				}).then(data=>{
					const payInfo = JSON.stringify(data)
					uni.setStorageSync('payInfo',payInfo)
					
					uni.navigateTo({
						url:"/pages/bags/pay"
					}) 
				}) 
			},
			getDetail(){
				this.$http({
					url:`/product/detail/${this.id}`,
					method:"get"
				}).then(data=>{
					this.list = data.product.albumPics.split(',')
					this.product = data.product;
					this.skuStockList = data.skuStockList;
					this.initSpecList(data);
				})
			},
			//将商品加入到购物车
			handleToAddCart() { 
				let productSkuStock = this.getSkuStock();
				let cartItem = {
					productId: this.product.id, 
					productSkuId: productSkuStock.id,
					quantity: this.count
				};
				this.$http({
					url:"/cart/add",
					data:cartItem
				}).then(data => {
					 uni.showToast({
					 	title:"添加成功",
						icon:"none"
					 })
					 this.show = false
				});
			},
			handleSubmit(type){
				if (!this.checkForLogin()) {
					return;
				}
				this.chooseType = type
				this.show = true
			},
			//检查登录状态并弹出登录框
			checkForLogin() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '你还没登录，是否要登录？',
						confirmText: '去登录',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				} else {
					return true;
				}
			},
			//获取当前选中商品的SKU
			getSkuStock() {
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					let availAbleSpecSet = new Map();
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
					}
					let correctCount = 0;
					for (let item of this.specSelected) {
						let value = availAbleSpecSet.get(item.pname);
						if (value != null && value == item.name) {
							correctCount++;
						}
					}
					if (correctCount == this.specSelected.length) {
						return this.skuStockList[i];
					}
				}
				return null;
			},
			//获取当前选中商品的SKU
			getSkuStock() {
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					let availAbleSpecSet = new Map();
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
					}
					let correctCount = 0;
					for (let item of this.specSelected) {
						let value = availAbleSpecSet.get(item.pname);
						if (value != null && value == item.name) {
							correctCount++;
						}
					}
					if (correctCount == this.specSelected.length) {
						return this.skuStockList[i];
					}
				}
				return null;
			},
			//设置商品规格
			initSpecList(data) {
				for (let i = 0; i < data.productAttributeList.length; i++) {
					let item = data.productAttributeList[i];
					if (item.type == 0) {
						this.specList.push({
							id: item.id,
							name: item.name
						});
						if (item.handAddStatus == 1) {
							//支持手动新增的
							let valueList = data.productAttributeValueList;
							let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
							console.log('filterValueList',filterValueList)
							let inputList = filterValueList[0].value.split(',');
							for (let j = 0; j < inputList.length; j++) {
								this.specChildList.push({
									pid: item.id,
									pname: item.name,
									name: inputList[j],
									pic: item.pic,
								});
							}
						} else if (item.handAddStatus == 0) {
							//不支持手动新增的
							let inputList = item.inputList.split(',');
							for (let j = 0; j < inputList.length; j++) {
								this.specChildList.push({
									pid: item.id,
									pname: item.name,
									name: inputList[j]
								});
							}
						}
					}
				}
				let availAbleSpecSet = new Set();
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.add(spDataArr[j].value);
					}
				}
				// 根据商品sku筛选出可用规格
				this.specChildList = this.specChildList.filter(item => {
					return availAbleSpecSet.has(item.name)
				});
				// 规格 默认选中第一条
				this.specList.forEach(item => {
					for (let cItem of this.specChildList) {
						if (cItem.pid === item.id) {
							this.$set(cItem, 'selected', true);
							this.specSelected.push(cItem);
							this.changeSpecInfo();
							break;
						}
					}
				})
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.changeSpecInfo();

			},
			changeSpecInfo() {
				let skuStock = this.getSkuStock(); 
				this.skuId = skuStock.id
				// if (skuStock != null) {
				// 	this.product.originalPrice = skuStock.price;
				// 	if (this.product.promotionType == 1) {
				// 		//单品优惠使用促销价
				// 		this.product.price = skuStock.promotionPrice;
				// 	} else {
				// 		this.product.price = skuStock.price;
				// 	}
				// 	this.product.stock = skuStock.stock;
				// }
			},
			handleBack(){
				uni.navigateBack()
			},
			handleToGoodsReview(){
				uni.navigateTo({
					url:`./reviews?id=${this.id}`
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.attr-list {
				display: flex;
				flex-direction: column;
				font-size: 22rpx;
				color: #333;
				padding-top: 20upx;
			}
	
			.item-list {
				padding: 20upx 0 0;
				display: flex;
				flex-wrap: wrap;
	
				text {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #eee;
					margin-right: 20upx;
					margin-bottom: 20upx;
					border-radius: 100upx;
					min-width: 60upx;
					height: 60upx;
					padding: 0 20upx;
					font-size: 24rpx;
					color: #333;
				}
	
				.selected {
					background: #020202;
					color: #fff;
				}
			}
	.shareBox{
		background: #F1F1F1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		.item{
			padding: 0;
			background: none;
			margin: 0;
			&::after{
				display:none
			}
			image{
				display: block;
				width: 104rpx;
				height: 104rpx;
			}
			text{
				font-size: 22rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #666666;
				display: block;
				text-align: center;
				margin-top: 12rpx;
			}
		}
	}
	.goodsNum{
		display: flex;
		align-items: center;
		justify-content: space-between; 
		.title{
			font-size: 28rpx;
			color: #333;
		}
	} 
		.btn{ 
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;
			.btn1{
				width: 330rpx;
				height: 88rpx;
				border-radius: 50rpx;
				border: 1rpx solid #020202;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;
				color: #020202;
			}
			.btn2{
				width: 100%;
				height: 88rpx;
				border: 1px solid #020202;
				background: #020202;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;
			}
		}
		.pop_t1{
			margin-bottom: 30rpx;
			.t{
				display: flex;
				align-items: flex-end;
				.stock{
					font-size: 24rpx;
					color: #999;
					margin-left: 30rpx;
				}
			}
			.t1{
				font-size: 44rpx;
				font-family: 'DINPro-Medium';
				color: #333;
			}
			.t2{
				font-size: 24rpx;
				color: #999;
				margin-top: 12rpx;
			}
		} 
	.banner{
		position: relative;
		.heart{
			position: absolute;
			right: 30rpx;
			top: 50rpx;
			z-index: 999;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
		.arrow-left{
			position: fixed;
			left: 0rpx;
			top:0;
			display: flex;
			width: 100%;
			align-items: center;
			.icon{
				width: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.share{
			position: absolute;
			right: 30rpx;
			top: 80rpx;
			z-index: 999;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.zw{
		height: 80rpx;
		padding: 30rpx;
	}
	.goodsBottomBtn{
		background: #fff;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(10,17,24,0.06);
		.right{
			display: flex;
			width: 100%;
			.btn1{
				width: 240rpx;
				height: 80rpx;
				border-radius: 50rpx;
				border: 1rpx solid #020202;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #020202;
			}
			.btn2{
				width: 100%;
				height: 80rpx;
				background: #020202;
				border: 1px solid #020202;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx; 
				font-size: 30rpx;
			}
		}
		.left{
			display: flex;
			align-items: center;
			.contact{
				padding: 0;
				background: none;
				&::after{
					border: none;
				}
			}
			.item{
				&:first-child{
					margin-right: 30rpx;
				}
			}
			image{
				width: 62rpx;
				display: block;
				height: 62rpx;
			}
		}
	}
	.goodsDetail{
		background: #fff;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		.title{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}
		.reviews{
			background: #fff;
			padding: 40rpx 30rpx;
			.bot{
				.imglist{
					display: flex;
					flex-wrap: wrap;
					image{
						width:166rpx;
						height: 166rpx;
						margin-right: 20rpx;
					}
				}
				.con{
					font-size: 24rpx;
					color: #333;
					margin-top: 30rpx;
					margin-bottom: 25rpx;
				}
				.t{
					display: flex;
					justify-content: space-between;
					.time{
						font-size: 22rpx;
						color: #999999;
					}
					.userinfo{
						display: flex;
						align-items: center;
						image{
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}
						.text{
							text{
								font-size: 22rpx;
								color: #999999;
							}
							
						}
					}
				}
			}
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35rpx;
				text{
					font-size: 32rpx;
					color: #333;
				}
				.more{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	.page-top{
		background: #fff;
		margin-bottom: 20rpx;
		.sbox2{
			font-size: 38rpx;
			color: #212121;
			padding: 40rpx 30rpx;
		}
		.sbox1{
			background: #020202;
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 16rpx 30rpx;
			.t1{
				font-size: 30rpx;
				color: #fff;
				font-family: 'DINPro-Medium';
			}
			.t2{
				font-size: 30rpx;
				color: rgba(255,255,255,.6);
				margin-left: 40rpx;
				font-family: 'DINPro-Medium';
			}
			.t3{
				font-size: 30rpx;
				color: rgba(255,255,255,.6);
				margin-left: 30rpx;
				border-left: 1px solid rgba(255,255,255,.4);
				padding-left: 30rpx;
			}
		}
	}
</style>